<template>
  <div>
    <div class="row">
      <span class="left">姓名：</span>
      <input class="right" type="text" id="username" v-model="username">
    </div>
    <div class="row">
      <span class="left">联系方式：</span>
      <input class="right" type="number" id="linkNum" v-model="linkNum">
    </div>
    <div class="row">
      <span class="left">所在地区：</span>
      <picker class="right" mode="region" @change="bindRegionChange" :value="region">
        <view class="picker">
          {{region[0]}} {{region[1]}} {{region[2]}}
        </view>
      </picker>
    </div>
    <div class="row">
      <span class="left">详细地址：</span>
      <input class="right" type="text" id="areaDesc" v-model="areaDesc" placeholder="街道、楼牌号">
    </div>
    <div class="row">
      <span class="left">设为默认</span>
      <switch @change="setDefaultAddr" :checked="isDefault == 1" />
    </div>

    <div class="submit" @click="submit">
      <span>保存地址</span>
    </div>

    <MPrompt :msg="promptMsg" @confirm="promptConfirm" v-if="showPrompt"></MPrompt>
    <MPrompt :msg="promptMsg1" @confirm="promptConfirm1" v-if="showPrompt1"></MPrompt>
  </div>
</template>

<script>
import MPrompt from '../../components/MPrompt.vue'
export default {
  data () {
    return {
      id: '',
      username: '',
      linkNum: '',
      region: ['请选择'],
      areaDesc: '',
      showPrompt: false,
      promptMsg: '',
      showPrompt1: false,
      promptMsg1: '',
      isDefault: 0,
      openid: ''
    }
  },

  components: {
    MPrompt
  },

  onLoad (property) {
    console.log('地址信息', property.id)
    if (property.flag) {
      this.id = property.id
      this.username = property.realName
      this.linkNum = property.linkNum
      this.region = property.region.split('/')
      this.areaDesc = property.areaDesc
      this.isDefault = property.isDefault
    } else {
      this.id = ''
      this.username = ''
      this.linkNum = ''
      this.region = ['请选择']
      this.areaDesc = ''
      this.isDefault = false
    }
  },

  mounted () {
    this.openid = wx.getStorageSync('openid')
  },

  methods: {
    bindRegionChange (e) {
      console.log('picker发送选择改变，携带值为', e)
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.region = e.target.value
    },
    setDefaultAddr (e) {
      console.log('设置默认', e)
      this.isDefault = e.target.value
    },

    /**
     * 提交
     */
    submit () {
      debugger
      if (this.username === '') {
        this.promptMsg1 = '请填写姓名！'
        this.showPrompt1 = true
        return
      }
      if (this.linkNum === '') {
        this.promptMsg1 = '请填写号码！'
        this.showPrompt1 = true
        return
      }
      if (this.region.length < 3) {
        this.promptMsg1 = '请选择地市！'
        this.showPrompt1 = true
        return
      }
      if (this.areaDesc === '') {
        this.promptMsg1 = '请填写详细地址！'
        this.showPrompt1 = true
        return
      }

      if (this.id) {
        // 修改
        this.updateAddress()
      } else {
        // 新增
        this.addAddress()
      }
    },

    /**
     * 新增地址
     */
    addAddress () {
      this.$http.post('/api/v1/address/add', {
        body: {
          openid: this.openid,
          realName: this.username,
          phoneNum: this.linkNum,
          areaName: this.region.join('/'),
          detailAddress: this.areaDesc,
          isDefault: this.isDefault ? 1 : 0
        }
      }).then(res => {
        if (res.data.code === '0') {
          this.promptMsg = '新增地址成功！'
          this.showPrompt = true
        } else {
          this.promptMsg1 = '新增地址失败！'
          this.showPrompt1 = true
        }
      })
    },

    updateAddress () {
      this.$http.post('/api/v1/address/update', {
        body: {
          id: this.id,
          openid: this.openid,
          realName: this.username,
          phoneNum: this.linkNum,
          areaName: this.region.join('/'),
          detailAddress: this.areaDesc,
          isDefault: this.isDefault ? 1 : 0
        }
      }).then(res => {
        console.log('更新成功返回结构', res.data.code)
        if (res.data.code === '0') {
          this.promptMsg = '更新地址成功！'
        } else {
          this.promptMsg = '更新地址失败！'
        }
        this.showPrompt = true
      })
    },

    promptConfirm (flag) {
      console.log('quding', flag)
      this.showPrompt = false
      wx.navigateBack({
        delta: 1
      })
    },

    promptConfirm1 (flag) {
      console.log('quding', flag)
      this.showPrompt1 = false
    }
  }
}
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  text-align: left;
  font-size: 32rpx;
  color: #666666;
  margin: 0 30rpx;
  padding: 34rpx 0;
  border-bottom: 1rpx solid #e5e5e5;
}

.row .left {
  width: 25%;
}

.row .right {
  width: 75%;
  text-align: right;
}

.submit {
  margin: 50rpx 30rpx;
  background: #e33a44;
  text-align: center;
  color: #fff;
  font-size: 34rpx;
  padding: 30rpx;
  border-radius: 10rpx;
}
</style>
